diff --git a/.history/src/router/index_20231204141051.js b/.history/src/router/index_20231204141051.js
new file mode 100644
index 0000000..501e8d5
--- /dev/null
+++ b/.history/src/router/index_20231204141051.js
@@ -0,0 +1,34 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+  {
+    path: "/xqxy",
+    name: "xqxy",
+    component: () => import("../views/XQXY.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "hash",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231204180211.js b/.history/src/router/index_20231204180211.js
new file mode 100644
index 0000000..f97e495
--- /dev/null
+++ b/.history/src/router/index_20231204180211.js
@@ -0,0 +1,39 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+  {
+    path: "/xqxy",
+    name: "xqxy",
+    component: () => import("../views/XQXY.vue"),
+  },
+  {
+    path:"/one",
+    name:"one",
+    component:()=>import("../views/ONE.vue")
+  }
+];
+
+const router = new VueRouter({
+  mode: "hash",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231204180213.js b/.history/src/router/index_20231204180213.js
new file mode 100644
index 0000000..772e411
--- /dev/null
+++ b/.history/src/router/index_20231204180213.js
@@ -0,0 +1,39 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+  {
+    path: "/xqxy",
+    name: "xqxy",
+    component: () => import("../views/XQXY.vue"),
+  },
+  {
+    path:"/one",
+    name:"one",
+    component:()=>import("../views/ONE.vue");
+  }
+];
+
+const router = new VueRouter({
+  mode: "hash",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231204180217.js b/.history/src/router/index_20231204180217.js
new file mode 100644
index 0000000..97cc70d
--- /dev/null
+++ b/.history/src/router/index_20231204180217.js
@@ -0,0 +1,39 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+  {
+    path: "/xqxy",
+    name: "xqxy",
+    component: () => import("../views/XQXY.vue"),
+  },
+  {
+    path:"/one",
+    name:"one",
+    component:()=>import("../views/ONE.vue"),
+  }
+];
+
+const router = new VueRouter({
+  mode: "hash",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/views/ONE_20231204175520.vue b/.history/src/views/ONE_20231204175520.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/views/ONE_20231204175758.vue b/.history/src/views/ONE_20231204175758.vue
new file mode 100644
index 0000000..b57191a
--- /dev/null
+++ b/.history/src/views/ONE_20231204175758.vue
@@ -0,0 +1,288 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+    name: 'ProjectONE',
+
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = 1;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+},
+
+/**
+ * 绘制3d图
+ * @param pieData 总数据
+ * @param internalDiameterRatio:透明的空心占比
+ * @param distance 视角到主体的距离
+ * @param alpha 旋转角度
+ * @param pieHeight 立体的高度
+ * @param opacity 饼或者环的透明度
+ */
+ getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    const legendData = [];
+    const k =
+        typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+        };
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {};
+            if (typeof pieData[i].itemStyle.color !== 'undefined') {
+                itemStyle.color = pieData[i].itemStyle.color;
+            }
+            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
+                itemStyle.opacity = pieData[i].itemStyle.opacity;
+            }
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value)
+        series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    return series;
+},
+getbing(){
+    const optionsData = [
+    {
+        name: 'aa',
+        value: 11,
+        itemStyle: {
+            color: '#41adf8',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'cc',
+        value: 33,
+        itemStyle: {
+            color: '#ffa100',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'bb',
+        value: 22,
+        itemStyle: {
+            color: '#2acf81',
+            // opacity: 1,
+        },
+    },
+];
+
+const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+series.push({
+    name: 'pie2d',
+    type: 'pie',
+    label: {
+        opacity: 1,
+        fontSize: 13,
+        lineHeight: 20,
+    },
+    labelLine: {
+        length: 30,
+        length2: 30,
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ['20%', '50%'],
+    center: ['50%', '50%'],
+    data: optionsData,
+    itemStyle: {
+        opacity: 0,
+    },
+});
+
+option = {
+    legend: {
+        tooltip: {
+            show: true,
+        },
+        data: ['aa', 'bb', 'cc'],
+        bottom: '10%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12,
+        },
+    },
+    tooltip: {
+        formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                    (option.series[params.seriesIndex].pieData.endRatio -
+                        option.series[params.seriesIndex].pieData.startRatio) *
+                    100
+                ).toFixed(2);
+                return (
+                    `${params.seriesName}<br/>` +
+                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                    `${bfb}%`
+                );
+            }
+        },
+    },
+    title: {
+        text: '3D 饼图',
+        x: 'center',
+        top: '20',
+        textStyle: {
+            color: '#fff',
+            fontSize: 22,
+        },
+    },
+    backgroundColor: '#333',
+    labelLine: {
+        show: true,
+        lineStyle: {
+            color: '#7BC0CB',
+        },
+    },
+    label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b} \n{c} {d}%',
+    },
+    xAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    yAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    zAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    grid3D: {
+        show: false,
+        boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+        viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+        },
+    },
+    series: series,
+};
+}
+
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/.history/src/views/ONE_20231204175907.vue b/.history/src/views/ONE_20231204175907.vue
new file mode 100644
index 0000000..b0c903c
--- /dev/null
+++ b/.history/src/views/ONE_20231204175907.vue
@@ -0,0 +1,279 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+    name: 'ProjectONE',
+
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = 1;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+},
+
+ getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    const legendData = [];
+    const k =
+        typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+        };
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {};
+            if (typeof pieData[i].itemStyle.color !== 'undefined') {
+                itemStyle.color = pieData[i].itemStyle.color;
+            }
+            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
+                itemStyle.opacity = pieData[i].itemStyle.opacity;
+            }
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value)
+        series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    return series;
+},
+getbing(){
+    const optionsData = [
+    {
+        name: 'aa',
+        value: 11,
+        itemStyle: {
+            color: '#41adf8',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'cc',
+        value: 33,
+        itemStyle: {
+            color: '#ffa100',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'bb',
+        value: 22,
+        itemStyle: {
+            color: '#2acf81',
+            // opacity: 1,
+        },
+    },
+];
+
+const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+series.push({
+    name: 'pie2d',
+    type: 'pie',
+    label: {
+        opacity: 1,
+        fontSize: 13,
+        lineHeight: 20,
+    },
+    labelLine: {
+        length: 30,
+        length2: 30,
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ['20%', '50%'],
+    center: ['50%', '50%'],
+    data: optionsData,
+    itemStyle: {
+        opacity: 0,
+    },
+});
+
+option = {
+    legend: {
+        tooltip: {
+            show: true,
+        },
+        data: ['aa', 'bb', 'cc'],
+        bottom: '10%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12,
+        },
+    },
+    tooltip: {
+        formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                    (option.series[params.seriesIndex].pieData.endRatio -
+                        option.series[params.seriesIndex].pieData.startRatio) *
+                    100
+                ).toFixed(2);
+                return (
+                    `${params.seriesName}<br/>` +
+                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                    `${bfb}%`
+                );
+            }
+        },
+    },
+    title: {
+        text: '3D 饼图',
+        x: 'center',
+        top: '20',
+        textStyle: {
+            color: '#fff',
+            fontSize: 22,
+        },
+    },
+    backgroundColor: '#333',
+    labelLine: {
+        show: true,
+        lineStyle: {
+            color: '#7BC0CB',
+        },
+    },
+    label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b} \n{c} {d}%',
+    },
+    xAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    yAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    zAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    grid3D: {
+        show: false,
+        boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+        viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+        },
+    },
+    series: series,
+};
+}
+
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/.history/src/views/ONE_20231204175930.vue b/.history/src/views/ONE_20231204175930.vue
new file mode 100644
index 0000000..d9d6226
--- /dev/null
+++ b/.history/src/views/ONE_20231204175930.vue
@@ -0,0 +1,279 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+    name: 'ProjectONE',
+
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = 1;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+},
+
+ getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    const legendData = [];
+    const k =
+        typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+        };
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {};
+            if (typeof pieData[i].itemStyle.color !== 'undefined') {
+                itemStyle.color = pieData[i].itemStyle.color;
+            }
+            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
+                itemStyle.opacity = pieData[i].itemStyle.opacity;
+            }
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value)
+        series[i].parametricEquation = this.getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    return series;
+},
+getbing(){
+    const optionsData = [
+    {
+        name: 'aa',
+        value: 11,
+        itemStyle: {
+            color: '#41adf8',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'cc',
+        value: 33,
+        itemStyle: {
+            color: '#ffa100',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'bb',
+        value: 22,
+        itemStyle: {
+            color: '#2acf81',
+            // opacity: 1,
+        },
+    },
+];
+
+const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+series.push({
+    name: 'pie2d',
+    type: 'pie',
+    label: {
+        opacity: 1,
+        fontSize: 13,
+        lineHeight: 20,
+    },
+    labelLine: {
+        length: 30,
+        length2: 30,
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ['20%', '50%'],
+    center: ['50%', '50%'],
+    data: optionsData,
+    itemStyle: {
+        opacity: 0,
+    },
+});
+
+option = {
+    legend: {
+        tooltip: {
+            show: true,
+        },
+        data: ['aa', 'bb', 'cc'],
+        bottom: '10%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12,
+        },
+    },
+    tooltip: {
+        formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                    (option.series[params.seriesIndex].pieData.endRatio -
+                        option.series[params.seriesIndex].pieData.startRatio) *
+                    100
+                ).toFixed(2);
+                return (
+                    `${params.seriesName}<br/>` +
+                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                    `${bfb}%`
+                );
+            }
+        },
+    },
+    title: {
+        text: '3D 饼图',
+        x: 'center',
+        top: '20',
+        textStyle: {
+            color: '#fff',
+            fontSize: 22,
+        },
+    },
+    backgroundColor: '#333',
+    labelLine: {
+        show: true,
+        lineStyle: {
+            color: '#7BC0CB',
+        },
+    },
+    label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b} \n{c} {d}%',
+    },
+    xAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    yAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    zAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    grid3D: {
+        show: false,
+        boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+        viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+        },
+    },
+    series: series,
+};
+}
+
+
+    },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/.history/src/views/ONE_20231204175952.vue b/.history/src/views/ONE_20231204175952.vue
new file mode 100644
index 0000000..952d9fd
--- /dev/null
+++ b/.history/src/views/ONE_20231204175952.vue
@@ -0,0 +1,284 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+    name: 'ProjectONE',
+
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = 1;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+},
+
+ getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    const legendData = [];
+    const k =
+        typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+        };
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {};
+            if (typeof pieData[i].itemStyle.color !== 'undefined') {
+                itemStyle.color = pieData[i].itemStyle.color;
+            }
+            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
+                itemStyle.opacity = pieData[i].itemStyle.opacity;
+            }
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value)
+        series[i].parametricEquation = this.getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    return series;
+},
+getbing(){
+    const optionsData = [
+    {
+        name: 'aa',
+        value: 11,
+        itemStyle: {
+            color: '#41adf8',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'cc',
+        value: 33,
+        itemStyle: {
+            color: '#ffa100',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'bb',
+        value: 22,
+        itemStyle: {
+            color: '#2acf81',
+            // opacity: 1,
+        },
+    },
+];
+
+const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+series.push({
+    name: 'pie2d',
+    type: 'pie',
+    label: {
+        opacity: 1,
+        fontSize: 13,
+        lineHeight: 20,
+    },
+    labelLine: {
+        length: 30,
+        length2: 30,
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ['20%', '50%'],
+    center: ['50%', '50%'],
+    data: optionsData,
+    itemStyle: {
+        opacity: 0,
+    },
+});
+
+option = {
+    legend: {
+        tooltip: {
+            show: true,
+        },
+        data: ['aa', 'bb', 'cc'],
+        bottom: '10%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12,
+        },
+    },
+    tooltip: {
+        formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                    (option.series[params.seriesIndex].pieData.endRatio -
+                        option.series[params.seriesIndex].pieData.startRatio) *
+                    100
+                ).toFixed(2);
+                return (
+                    `${params.seriesName}<br/>` +
+                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                    `${bfb}%`
+                );
+            }
+        },
+    },
+    title: {
+        text: '3D 饼图',
+        x: 'center',
+        top: '20',
+        textStyle: {
+            color: '#fff',
+            fontSize: 22,
+        },
+    },
+    backgroundColor: '#333',
+    labelLine: {
+        show: true,
+        lineStyle: {
+            color: '#7BC0CB',
+        },
+    },
+    label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b} \n{c} {d}%',
+    },
+    xAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    yAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    zAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    grid3D: {
+        show: false,
+        boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+        viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+        },
+    },
+    series: series,
+};
+}
+
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+#bing{
+    width: 100%;
+    height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180005.vue b/.history/src/views/ONE_20231204180005.vue
new file mode 100644
index 0000000..0bedfff
--- /dev/null
+++ b/.history/src/views/ONE_20231204180005.vue
@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ProjectONE',
+
+    data() {
+        return {
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+        // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    const midRatio = (startRatio + endRatio) / 2;
+    const startRadian = startRatio * Math.PI * 2;
+    const endRadian = endRatio * Math.PI * 2;
+    const midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = 1;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    const hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+},
+
+ getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
+    const series = [];
+    let sumValue = 0;
+    let startValue = 0;
+    let endValue = 0;
+    const legendData = [];
+    const k =
+        typeof internalDiameterRatio !== 'undefined'
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+        };
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+            const itemStyle = {};
+            if (typeof pieData[i].itemStyle.color !== 'undefined') {
+                itemStyle.color = pieData[i].itemStyle.color;
+            }
+            if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
+                itemStyle.opacity = pieData[i].itemStyle.opacity;
+            }
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value)
+        series[i].parametricEquation = this.getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+    }
+    return series;
+},
+getbing(){
+    const optionsData = [
+    {
+        name: 'aa',
+        value: 11,
+        itemStyle: {
+            color: '#41adf8',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'cc',
+        value: 33,
+        itemStyle: {
+            color: '#ffa100',
+            // opacity: 1,
+        },
+    },
+    {
+        name: 'bb',
+        value: 22,
+        itemStyle: {
+            color: '#2acf81',
+            // opacity: 1,
+        },
+    },
+];
+
+const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+series.push({
+    name: 'pie2d',
+    type: 'pie',
+    label: {
+        opacity: 1,
+        fontSize: 13,
+        lineHeight: 20,
+    },
+    labelLine: {
+        length: 30,
+        length2: 30,
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ['20%', '50%'],
+    center: ['50%', '50%'],
+    data: optionsData,
+    itemStyle: {
+        opacity: 0,
+    },
+});
+
+option = {
+    legend: {
+        tooltip: {
+            show: true,
+        },
+        data: ['aa', 'bb', 'cc'],
+        bottom: '10%',
+        textStyle: {
+            color: '#fff',
+            fontSize: 12,
+        },
+    },
+    tooltip: {
+        formatter: (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                    (option.series[params.seriesIndex].pieData.endRatio -
+                        option.series[params.seriesIndex].pieData.startRatio) *
+                    100
+                ).toFixed(2);
+                return (
+                    `${params.seriesName}<br/>` +
+                    `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                    `${bfb}%`
+                );
+            }
+        },
+    },
+    title: {
+        text: '3D 饼图',
+        x: 'center',
+        top: '20',
+        textStyle: {
+            color: '#fff',
+            fontSize: 22,
+        },
+    },
+    backgroundColor: '#333',
+    labelLine: {
+        show: true,
+        lineStyle: {
+            color: '#7BC0CB',
+        },
+    },
+    label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b} \n{c} {d}%',
+    },
+    xAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    yAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    zAxis3D: {
+        min: -1,
+        max: 1,
+    },
+    grid3D: {
+        show: false,
+        boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+        viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+        },
+    },
+    series: series,
+};
+}
+
+
+    },
+};
+</script>
+
+<style lang="less" scoped>
+#bing{
+    width: 100%;
+    height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180117.vue b/.history/src/views/ONE_20231204180117.vue
new file mode 100644
index 0000000..64f373f
--- /dev/null
+++ b/.history/src/views/ONE_20231204180117.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "aa",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "cc",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "bb",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("")
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 100%;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180124.vue b/.history/src/views/ONE_20231204180124.vue
new file mode 100644
index 0000000..66694fa
--- /dev/null
+++ b/.history/src/views/ONE_20231204180124.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "aa",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "cc",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "bb",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option)
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 100%;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180126.vue b/.history/src/views/ONE_20231204180126.vue
new file mode 100644
index 0000000..ebfc35b
--- /dev/null
+++ b/.history/src/views/ONE_20231204180126.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "aa",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "cc",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "bb",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 100%;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180304.vue b/.history/src/views/ONE_20231204180304.vue
new file mode 100644
index 0000000..0bd5a87
--- /dev/null
+++ b/.history/src/views/ONE_20231204180304.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "aa",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "cc",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "bb",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 100%;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231204180334.vue b/.history/src/views/ONE_20231204180334.vue
new file mode 100644
index 0000000..ee50027
--- /dev/null
+++ b/.history/src/views/ONE_20231204180334.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "aa",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "cc",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "bb",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205083707.vue b/.history/src/views/ONE_20231205083707.vue
new file mode 100644
index 0000000..c1c0bf0
--- /dev/null
+++ b/.history/src/views/ONE_20231205083707.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#41adf8",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205083731.vue b/.history/src/views/ONE_20231205083731.vue
new file mode 100644
index 0000000..5f5b269
--- /dev/null
+++ b/.history/src/views/ONE_20231205083731.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#ffa100",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205083846.vue b/.history/src/views/ONE_20231205083846.vue
new file mode 100644
index 0000000..35cca3a
--- /dev/null
+++ b/.history/src/views/ONE_20231205083846.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#2acf81",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205083911.vue b/.history/src/views/ONE_20231205083911.vue
new file mode 100644
index 0000000..a375a27
--- /dev/null
+++ b/.history/src/views/ONE_20231205083911.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["aa", "bb", "cc"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205084117.vue b/.history/src/views/ONE_20231205084117.vue
new file mode 100644
index 0000000..7f1ce43
--- /dev/null
+++ b/.history/src/views/ONE_20231205084117.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["生料系统", "水泥磨系统", "破碎系统"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        title: {
+          text: "3D 饼图",
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: 22,
+          },
+        },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205084306.vue b/.history/src/views/ONE_20231205084306.vue
new file mode 100644
index 0000000..7e61d51
--- /dev/null
+++ b/.history/src/views/ONE_20231205084306.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["生料系统", "水泥磨系统", "破碎系统"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205084618.vue b/.history/src/views/ONE_20231205084618.vue
new file mode 100644
index 0000000..fbcd427
--- /dev/null
+++ b/.history/src/views/ONE_20231205084618.vue
@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["生料系统", "水泥磨系统", "破碎系统"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            console.log(params);
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205084711.vue b/.history/src/views/ONE_20231205084711.vue
new file mode 100644
index 0000000..b3359da
--- /dev/null
+++ b/.history/src/views/ONE_20231205084711.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
+          },
+          data: ["生料系统", "水泥磨系统", "破碎系统"],
+          bottom: "10%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          formatter: (params) => {
+            console.log(params);
+            console.log(params.seriesName);
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085035.vue b/.history/src/views/ONE_20231205085035.vue
new file mode 100644
index 0000000..b8044c4
--- /dev/null
+++ b/.history/src/views/ONE_20231205085035.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        tooltip: {
+          formatter: (params) => {
+            console.log(params);
+            console.log(params.seriesName);
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              let bfb = (
+                (option.series[params.seriesIndex].pieData.endRatio -
+                  option.series[params.seriesIndex].pieData.startRatio) *
+                100
+              ).toFixed(2);
+              return (
+                `${params.seriesName}<br/>` +
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                `${bfb}%`
+              );
+            }
+          },
+        },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085130.vue b/.history/src/views/ONE_20231205085130.vue
new file mode 100644
index 0000000..31815d5
--- /dev/null
+++ b/.history/src/views/ONE_20231205085130.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        backgroundColor: "#333",
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085215.vue b/.history/src/views/ONE_20231205085215.vue
new file mode 100644
index 0000000..acd6782
--- /dev/null
+++ b/.history/src/views/ONE_20231205085215.vue
@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: "{b} \n{c} {d}%",
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085254.vue b/.history/src/views/ONE_20231205085254.vue
new file mode 100644
index 0000000..4a5264e
--- /dev/null
+++ b/.history/src/views/ONE_20231205085254.vue
@@ -0,0 +1,318 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085544.vue b/.history/src/views/ONE_20231205085544.vue
new file mode 100644
index 0000000..884acb5
--- /dev/null
+++ b/.history/src/views/ONE_20231205085544.vue
@@ -0,0 +1,319 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085607.vue b/.history/src/views/ONE_20231205085607.vue
new file mode 100644
index 0000000..9e7a92b
--- /dev/null
+++ b/.history/src/views/ONE_20231205085607.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085631.vue b/.history/src/views/ONE_20231205085631.vue
new file mode 100644
index 0000000..edf68ca
--- /dev/null
+++ b/.history/src/views/ONE_20231205085631.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}</br>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085741.vue b/.history/src/views/ONE_20231205085741.vue
new file mode 100644
index 0000000..e00e1f9
--- /dev/null
+++ b/.history/src/views/ONE_20231205085741.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}</br>`+`<span style=color:${params.color}>${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085758.vue b/.history/src/views/ONE_20231205085758.vue
new file mode 100644
index 0000000..92a0d13
--- /dev/null
+++ b/.history/src/views/ONE_20231205085758.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+`<span style=color:${params.color}>${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085911.vue b/.history/src/views/ONE_20231205085911.vue
new file mode 100644
index 0000000..e8a853b
--- /dev/null
+++ b/.history/src/views/ONE_20231205085911.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+`<span style="color:${params.color}"">${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085927.vue b/.history/src/views/ONE_20231205085927.vue
new file mode 100644
index 0000000..4199257
--- /dev/null
+++ b/.history/src/views/ONE_20231205085927.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+"\t"+`<span style="color:${params.color}"">${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085937.vue b/.history/src/views/ONE_20231205085937.vue
new file mode 100644
index 0000000..990e4f6
--- /dev/null
+++ b/.history/src/views/ONE_20231205085937.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+"\d"+`<span style="color:${params.color}"">${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205085948.vue b/.history/src/views/ONE_20231205085948.vue
new file mode 100644
index 0000000..c56beb1
--- /dev/null
+++ b/.history/src/views/ONE_20231205085948.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}"">${params.name}</span>`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090037.vue b/.history/src/views/ONE_20231205090037.vue
new file mode 100644
index 0000000..f140194
--- /dev/null
+++ b/.history/src/views/ONE_20231205090037.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}""></span>`+${params.name}
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090056.vue b/.history/src/views/ONE_20231205090056.vue
new file mode 100644
index 0000000..6ec6b1f
--- /dev/null
+++ b/.history/src/views/ONE_20231205090056.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter:(params)=>{
+            console.log(params);
+            return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}""></span>`+`${params.name}`
+          },
+          rich:{
+            name:{
+              fontSize:24,
+              color:"#fff",
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing",option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090104.vue b/.history/src/views/ONE_20231205090104.vue
new file mode 100644
index 0000000..7d131ca
--- /dev/null
+++ b/.history/src/views/ONE_20231205090104.vue
@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +
+              `<span style="color:${params.color}""></span>` +
+              `${params.name}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090119.vue b/.history/src/views/ONE_20231205090119.vue
new file mode 100644
index 0000000..b013d5d
--- /dev/null
+++ b/.history/src/views/ONE_20231205090119.vue
@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +
+              `<span style="color:${params.color}"></span>` +
+              `${params.name}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090240.vue b/.history/src/views/ONE_20231205090240.vue
new file mode 100644
index 0000000..c42433d
--- /dev/null
+++ b/.history/src/views/ONE_20231205090240.vue
@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+              `<span style="color:${params.color}"></span>` +
+              `${params.name}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090309.vue b/.history/src/views/ONE_20231205090309.vue
new file mode 100644
index 0000000..ae59e0a
--- /dev/null
+++ b/.history/src/views/ONE_20231205090309.vue
@@ -0,0 +1,332 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:"#",
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090318.vue b/.history/src/views/ONE_20231205090318.vue
new file mode 100644
index 0000000..d07efdf
--- /dev/null
+++ b/.history/src/views/ONE_20231205090318.vue
@@ -0,0 +1,333 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:"#",
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090541.vue b/.history/src/views/ONE_20231205090541.vue
new file mode 100644
index 0000000..43528ca
--- /dev/null
+++ b/.history/src/views/ONE_20231205090541.vue
@@ -0,0 +1,331 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:function(params){
+              console.log(params);
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090654.vue b/.history/src/views/ONE_20231205090654.vue
new file mode 100644
index 0000000..6833f49
--- /dev/null
+++ b/.history/src/views/ONE_20231205090654.vue
@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:function(params){
+                console.log(params);
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090711.vue b/.history/src/views/ONE_20231205090711.vue
new file mode 100644
index 0000000..6833f49
--- /dev/null
+++ b/.history/src/views/ONE_20231205090711.vue
@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:function(params){
+                console.log(params);
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090748.vue b/.history/src/views/ONE_20231205090748.vue
new file mode 100644
index 0000000..8e95ee3
--- /dev/null
+++ b/.history/src/views/ONE_20231205090748.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:function(params){
+                console.log(params);
+                return params.color
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090851.vue b/.history/src/views/ONE_20231205090851.vue
new file mode 100644
index 0000000..0880a89
--- /dev/null
+++ b/.history/src/views/ONE_20231205090851.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:36,
+              color:function(params){
+                console.log(params);
+                return params.data.color
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090918.vue b/.history/src/views/ONE_20231205090918.vue
new file mode 100644
index 0000000..d405971
--- /dev/null
+++ b/.history/src/views/ONE_20231205090918.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:24,
+              color:function(params){
+                console.log(params);
+                return params.data.color
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205090936.vue b/.history/src/views/ONE_20231205090936.vue
new file mode 100644
index 0000000..83d9b94
--- /dev/null
+++ b/.history/src/views/ONE_20231205090936.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return (
+              `{name|${params.name}}` +
+              "\n" +`{colors|${params.color}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors:{
+              fontSize:30,
+              color:function(params){
+                console.log(params);
+                return params.data.color
+              },
+              fontWeight:700
+            }
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205092530.vue b/.history/src/views/ONE_20231205092530.vue
new file mode 100644
index 0000000..3b86904
--- /dev/null
+++ b/.history/src/views/ONE_20231205092530.vue
@@ -0,0 +1,333 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093455.vue b/.history/src/views/ONE_20231205093455.vue
new file mode 100644
index 0000000..20862e6
--- /dev/null
+++ b/.history/src/views/ONE_20231205093455.vue
@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a,b)=>{
+              return a.value+b.value
+            })
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093541.vue b/.history/src/views/ONE_20231205093541.vue
new file mode 100644
index 0000000..090ac4f
--- /dev/null
+++ b/.history/src/views/ONE_20231205093541.vue
@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              return a.value + b.value;
+            });
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093552.vue b/.history/src/views/ONE_20231205093552.vue
new file mode 100644
index 0000000..f01cdd3
--- /dev/null
+++ b/.history/src/views/ONE_20231205093552.vue
@@ -0,0 +1,337 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              return a.value + b.value;
+            });
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093618.vue b/.history/src/views/ONE_20231205093618.vue
new file mode 100644
index 0000000..e16b4ac
--- /dev/null
+++ b/.history/src/views/ONE_20231205093618.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              return a.value + b.value;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093651.vue b/.history/src/views/ONE_20231205093651.vue
new file mode 100644
index 0000000..cd30bf3
--- /dev/null
+++ b/.history/src/views/ONE_20231205093651.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              return a + b;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093724.vue b/.history/src/views/ONE_20231205093724.vue
new file mode 100644
index 0000000..e16b4ac
--- /dev/null
+++ b/.history/src/views/ONE_20231205093724.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              return a.value + b.value;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093812.vue b/.history/src/views/ONE_20231205093812.vue
new file mode 100644
index 0000000..bb36331
--- /dev/null
+++ b/.history/src/views/ONE_20231205093812.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a, b) => {
+              console.log(a);
+              return a.value + b.value;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093916.vue b/.history/src/views/ONE_20231205093916.vue
new file mode 100644
index 0000000..2447810
--- /dev/null
+++ b/.history/src/views/ONE_20231205093916.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((item,index) => {
+              console.log(a);
+              return a + b;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093922.vue b/.history/src/views/ONE_20231205093922.vue
new file mode 100644
index 0000000..a319e8a
--- /dev/null
+++ b/.history/src/views/ONE_20231205093922.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((item,index) => {
+              console.log(index);
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093926.vue b/.history/src/views/ONE_20231205093926.vue
new file mode 100644
index 0000000..e1d1ac6
--- /dev/null
+++ b/.history/src/views/ONE_20231205093926.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((item,index) => {
+              console.log(item);
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093949.vue b/.history/src/views/ONE_20231205093949.vue
new file mode 100644
index 0000000..68aebeb
--- /dev/null
+++ b/.history/src/views/ONE_20231205093949.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a,b) => {
+              console.log(item);
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205093952.vue b/.history/src/views/ONE_20231205093952.vue
new file mode 100644
index 0000000..aea9f15
--- /dev/null
+++ b/.history/src/views/ONE_20231205093952.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a,b) => {
+              console.log(a);
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094011.vue b/.history/src/views/ONE_20231205094011.vue
new file mode 100644
index 0000000..569c64c
--- /dev/null
+++ b/.history/src/views/ONE_20231205094011.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            const total = optionsData.reduce((a,b) => {
+              console.log();
+              return a+b;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094341.vue b/.history/src/views/ONE_20231205094341.vue
new file mode 100644
index 0000000..65a72f9
--- /dev/null
+++ b/.history/src/views/ONE_20231205094341.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              total +=item.value;
+            })
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094409.vue b/.history/src/views/ONE_20231205094409.vue
new file mode 100644
index 0000000..1756eda
--- /dev/null
+++ b/.history/src/views/ONE_20231205094409.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: "11",
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              total +=item.value;
+            })
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094415.vue b/.history/src/views/ONE_20231205094415.vue
new file mode 100644
index 0000000..20cc610
--- /dev/null
+++ b/.history/src/views/ONE_20231205094415.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: "11",
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: "33",
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: "22",
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              total +=item.value;
+            })
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094426.vue b/.history/src/views/ONE_20231205094426.vue
new file mode 100644
index 0000000..fcf7040
--- /dev/null
+++ b/.history/src/views/ONE_20231205094426.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: "11",
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: "33",
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: "22",
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item, index) => {
+              total += item.value;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094453.vue b/.history/src/views/ONE_20231205094453.vue
new file mode 100644
index 0000000..d10c7ec
--- /dev/null
+++ b/.history/src/views/ONE_20231205094453.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: "11",
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: "33",
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: "22",
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item, index) => {
+              console.log(item);
+              total += item.value;
+            });
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094532.vue b/.history/src/views/ONE_20231205094532.vue
new file mode 100644
index 0000000..888e9a9
--- /dev/null
+++ b/.history/src/views/ONE_20231205094532.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item);
+              total +=item.value
+            })
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094604.vue b/.history/src/views/ONE_20231205094604.vue
new file mode 100644
index 0000000..b9e3fae
--- /dev/null
+++ b/.history/src/views/ONE_20231205094604.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total +=item.value
+            })
+            console.log(total);
+            const percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094614.vue b/.history/src/views/ONE_20231205094614.vue
new file mode 100644
index 0000000..f62e152
--- /dev/null
+++ b/.history/src/views/ONE_20231205094614.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total +=item.value
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094802.vue b/.history/src/views/ONE_20231205094802.vue
new file mode 100644
index 0000000..a298943
--- /dev/null
+++ b/.history/src/views/ONE_20231205094802.vue
@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value
+              return total
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094859.vue b/.history/src/views/ONE_20231205094859.vue
new file mode 100644
index 0000000..48024bf
--- /dev/null
+++ b/.history/src/views/ONE_20231205094859.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094914.vue b/.history/src/views/ONE_20231205094914.vue
new file mode 100644
index 0000000..0f6e5bf
--- /dev/null
+++ b/.history/src/views/ONE_20231205094914.vue
@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value;
+              console.log(total);
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094937.vue b/.history/src/views/ONE_20231205094937.vue
new file mode 100644
index 0000000..91bd4d9
--- /dev/null
+++ b/.history/src/views/ONE_20231205094937.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total=0;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value;
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094949.vue b/.history/src/views/ONE_20231205094949.vue
new file mode 100644
index 0000000..91bd4d9
--- /dev/null
+++ b/.history/src/views/ONE_20231205094949.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total=0;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value;
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100;
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205094957.vue b/.history/src/views/ONE_20231205094957.vue
new file mode 100644
index 0000000..a964664
--- /dev/null
+++ b/.history/src/views/ONE_20231205094957.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total=0;
+            optionsData.forEach((item,index)=>{
+              console.log(item.value);
+              total+=item.value;
+            })
+            console.log(total);
+            let percent = (params.value / total) * 100.toFixed(2);
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095012.vue b/.history/src/views/ONE_20231205095012.vue
new file mode 100644
index 0000000..3337e26
--- /dev/null
+++ b/.history/src/views/ONE_20231205095012.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095013.vue b/.history/src/views/ONE_20231205095013.vue
new file mode 100644
index 0000000..3337e26
--- /dev/null
+++ b/.history/src/views/ONE_20231205095013.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095027.vue b/.history/src/views/ONE_20231205095027.vue
new file mode 100644
index 0000000..9b50aab
--- /dev/null
+++ b/.history/src/views/ONE_20231205095027.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return `{name|${params.name}}` + "\n" + `{colors|${percent}%}`;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095103.vue b/.history/src/views/ONE_20231205095103.vue
new file mode 100644
index 0000000..4d7aa77
--- /dev/null
+++ b/.history/src/views/ONE_20231205095103.vue
@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return `{colors|${percent}%}`+ "\n"+"\n" + `{name|${params.name}}` ;
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095106.vue b/.history/src/views/ONE_20231205095106.vue
new file mode 100644
index 0000000..cfdc315
--- /dev/null
+++ b/.history/src/views/ONE_20231205095106.vue
@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095132.vue b/.history/src/views/ONE_20231205095132.vue
new file mode 100644
index 0000000..0091214
--- /dev/null
+++ b/.history/src/views/ONE_20231205095132.vue
@@ -0,0 +1,343 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+              color: "#fff",
+            },
+            colors: {
+              fontSize: 30,
+              color: function (params) {
+                console.log(params);
+                return params.data.color;
+              },
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095143.vue b/.history/src/views/ONE_20231205095143.vue
new file mode 100644
index 0000000..52c56a5
--- /dev/null
+++ b/.history/src/views/ONE_20231205095143.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095254.vue b/.history/src/views/ONE_20231205095254.vue
new file mode 100644
index 0000000..3a584c9
--- /dev/null
+++ b/.history/src/views/ONE_20231205095254.vue
@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color: "#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095406.vue b/.history/src/views/ONE_20231205095406.vue
new file mode 100644
index 0000000..1b3f93f
--- /dev/null
+++ b/.history/src/views/ONE_20231205095406.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData.itemStyle.color[0]
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095409.vue b/.history/src/views/ONE_20231205095409.vue
new file mode 100644
index 0000000..8accbf5
--- /dev/null
+++ b/.history/src/views/ONE_20231205095409.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData.itemStyle.color[0],
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/ONE_20231205095459.vue b/.history/src/views/ONE_20231205095459.vue
new file mode 100644
index 0000000..5b7125d
--- /dev/null
+++ b/.history/src/views/ONE_20231205095459.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154840.vue b/.history/src/views/TAN_20231204154840.vue
new file mode 100644
index 0000000..708dc50
--- /dev/null
+++ b/.history/src/views/TAN_20231204154840.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154845.vue b/.history/src/views/TAN_20231204154845.vue
new file mode 100644
index 0000000..0b401b6
--- /dev/null
+++ b/.history/src/views/TAN_20231204154845.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#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),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154857.vue b/.history/src/views/TAN_20231204154857.vue
new file mode 100644
index 0000000..f739e77
--- /dev/null
+++ b/.history/src/views/TAN_20231204154857.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154919.vue b/.history/src/views/TAN_20231204154919.vue
new file mode 100644
index 0000000..40d595b
--- /dev/null
+++ b/.history/src/views/TAN_20231204154919.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154942.vue b/.history/src/views/TAN_20231204154942.vue
new file mode 100644
index 0000000..179e5c6
--- /dev/null
+++ b/.history/src/views/TAN_20231204154942.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#005DCF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204154959.vue b/.history/src/views/TAN_20231204154959.vue
new file mode 100644
index 0000000..f169af9
--- /dev/null
+++ b/.history/src/views/TAN_20231204154959.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#005DCF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204155003.vue b/.history/src/views/TAN_20231204155003.vue
new file mode 100644
index 0000000..100c63f
--- /dev/null
+++ b/.history/src/views/TAN_20231204155003.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#005DCF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204155015.vue b/.history/src/views/TAN_20231204155015.vue
new file mode 100644
index 0000000..4b89110
--- /dev/null
+++ b/.history/src/views/TAN_20231204155015.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204155936.vue b/.history/src/views/TAN_20231204155936.vue
new file mode 100644
index 0000000..4b89110
--- /dev/null
+++ b/.history/src/views/TAN_20231204155936.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204160020.vue b/.history/src/views/TAN_20231204160020.vue
new file mode 100644
index 0000000..7da7def
--- /dev/null
+++ b/.history/src/views/TAN_20231204160020.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204160034.vue b/.history/src/views/TAN_20231204160034.vue
new file mode 100644
index 0000000..0b2f738
--- /dev/null
+++ b/.history/src/views/TAN_20231204160034.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204160055.vue b/.history/src/views/TAN_20231204160055.vue
new file mode 100644
index 0000000..47bbeb3
--- /dev/null
+++ b/.history/src/views/TAN_20231204160055.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204160109.vue b/.history/src/views/TAN_20231204160109.vue
new file mode 100644
index 0000000..cbef2d2
--- /dev/null
+++ b/.history/src/views/TAN_20231204160109.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204161229.vue b/.history/src/views/TAN_20231204161229.vue
new file mode 100644
index 0000000..ee60bcc
--- /dev/null
+++ b/.history/src/views/TAN_20231204161229.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204161243.vue b/.history/src/views/TAN_20231204161243.vue
new file mode 100644
index 0000000..c97358b
--- /dev/null
+++ b/.history/src/views/TAN_20231204161243.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204162017.vue b/.history/src/views/TAN_20231204162017.vue
new file mode 100644
index 0000000..1235547
--- /dev/null
+++ b/.history/src/views/TAN_20231204162017.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231204162025.vue b/.history/src/views/TAN_20231204162025.vue
new file mode 100644
index 0000000..2d701c3
--- /dev/null
+++ b/.history/src/views/TAN_20231204162025.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 50px;
+              height: 60px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205101743.vue b/.history/src/views/TAN_20231205101743.vue
new file mode 100644
index 0000000..2a85dde
--- /dev/null
+++ b/.history/src/views/TAN_20231205101743.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102213.vue b/.history/src/views/TAN_20231205102213.vue
new file mode 100644
index 0000000..91c5f1e
--- /dev/null
+++ b/.history/src/views/TAN_20231205102213.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102215.vue b/.history/src/views/TAN_20231205102215.vue
new file mode 100644
index 0000000..91c5f1e
--- /dev/null
+++ b/.history/src/views/TAN_20231205102215.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102434.vue b/.history/src/views/TAN_20231205102434.vue
new file mode 100644
index 0000000..64cab93
--- /dev/null
+++ b/.history/src/views/TAN_20231205102434.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102442.vue b/.history/src/views/TAN_20231205102442.vue
new file mode 100644
index 0000000..417d581
--- /dev/null
+++ b/.history/src/views/TAN_20231205102442.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102507.vue b/.history/src/views/TAN_20231205102507.vue
new file mode 100644
index 0000000..33646a6
--- /dev/null
+++ b/.history/src/views/TAN_20231205102507.vue
@@ -0,0 +1,2371 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102554.vue b/.history/src/views/TAN_20231205102554.vue
new file mode 100644
index 0000000..971451d
--- /dev/null
+++ b/.history/src/views/TAN_20231205102554.vue
@@ -0,0 +1,2371 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102712.vue b/.history/src/views/TAN_20231205102712.vue
new file mode 100644
index 0000000..5e840a5
--- /dev/null
+++ b/.history/src/views/TAN_20231205102712.vue
@@ -0,0 +1,2371 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129@2x.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102800.vue b/.history/src/views/TAN_20231205102800.vue
new file mode 100644
index 0000000..91c5f1e
--- /dev/null
+++ b/.history/src/views/TAN_20231205102800.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102832.vue b/.history/src/views/TAN_20231205102832.vue
new file mode 100644
index 0000000..417d581
--- /dev/null
+++ b/.history/src/views/TAN_20231205102832.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205102958.vue b/.history/src/views/TAN_20231205102958.vue
new file mode 100644
index 0000000..d6049dc
--- /dev/null
+++ b/.history/src/views/TAN_20231205102958.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3142@2x.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103034.vue b/.history/src/views/TAN_20231205103034.vue
new file mode 100644
index 0000000..955c8e1
--- /dev/null
+++ b/.history/src/views/TAN_20231205103034.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3142.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103100.vue b/.history/src/views/TAN_20231205103100.vue
new file mode 100644
index 0000000..7578f19
--- /dev/null
+++ b/.history/src/views/TAN_20231205103100.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141@2x.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 259px;
+            height: 259px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 259px;
+              height: 259px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103318.vue b/.history/src/views/TAN_20231205103318.vue
new file mode 100644
index 0000000..91c5f1e
--- /dev/null
+++ b/.history/src/views/TAN_20231205103318.vue
@@ -0,0 +1,2373 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103711.vue b/.history/src/views/TAN_20231205103711.vue
new file mode 100644
index 0000000..c7f12b8
--- /dev/null
+++ b/.history/src/views/TAN_20231205103711.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 20, 
+          itemHeight: 20, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103720.vue b/.history/src/views/TAN_20231205103720.vue
new file mode 100644
index 0000000..7c940f8
--- /dev/null
+++ b/.history/src/views/TAN_20231205103720.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 10, 
+          itemHeight: 20, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103726.vue b/.history/src/views/TAN_20231205103726.vue
new file mode 100644
index 0000000..b154245
--- /dev/null
+++ b/.history/src/views/TAN_20231205103726.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 20, 
+          itemHeight: 10, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103741.vue b/.history/src/views/TAN_20231205103741.vue
new file mode 100644
index 0000000..88127fe
--- /dev/null
+++ b/.history/src/views/TAN_20231205103741.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 15, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205103745.vue b/.history/src/views/TAN_20231205103745.vue
new file mode 100644
index 0000000..1d8b703
--- /dev/null
+++ b/.history/src/views/TAN_20231205103745.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 159px;
+            height: 159px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 159px;
+              height: 159px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104041.vue b/.history/src/views/TAN_20231205104041.vue
new file mode 100644
index 0000000..94c8716
--- /dev/null
+++ b/.history/src/views/TAN_20231205104041.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104055.vue b/.history/src/views/TAN_20231205104055.vue
new file mode 100644
index 0000000..b622ae3
--- /dev/null
+++ b/.history/src/views/TAN_20231205104055.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 168px;
+            height: 168px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 168px;
+              height: 168px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104120.vue b/.history/src/views/TAN_20231205104120.vue
new file mode 100644
index 0000000..b622ae3
--- /dev/null
+++ b/.history/src/views/TAN_20231205104120.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 168px;
+            height: 168px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 168px;
+              height: 168px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104143.vue b/.history/src/views/TAN_20231205104143.vue
new file mode 100644
index 0000000..94c8716
--- /dev/null
+++ b/.history/src/views/TAN_20231205104143.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104149.vue b/.history/src/views/TAN_20231205104149.vue
new file mode 100644
index 0000000..94c8716
--- /dev/null
+++ b/.history/src/views/TAN_20231205104149.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104221.vue b/.history/src/views/TAN_20231205104221.vue
new file mode 100644
index 0000000..fd6c921
--- /dev/null
+++ b/.history/src/views/TAN_20231205104221.vue
@@ -0,0 +1,2376 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-right: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104231.vue b/.history/src/views/TAN_20231205104231.vue
new file mode 100644
index 0000000..27803b3
--- /dev/null
+++ b/.history/src/views/TAN_20231205104231.vue
@@ -0,0 +1,2374 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104239.vue b/.history/src/views/TAN_20231205104239.vue
new file mode 100644
index 0000000..94c8716
--- /dev/null
+++ b/.history/src/views/TAN_20231205104239.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104305.vue b/.history/src/views/TAN_20231205104305.vue
new file mode 100644
index 0000000..f3ad01a
--- /dev/null
+++ b/.history/src/views/TAN_20231205104305.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104319.vue b/.history/src/views/TAN_20231205104319.vue
new file mode 100644
index 0000000..037b8c8
--- /dev/null
+++ b/.history/src/views/TAN_20231205104319.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104325.vue b/.history/src/views/TAN_20231205104325.vue
new file mode 100644
index 0000000..f4d14dc
--- /dev/null
+++ b/.history/src/views/TAN_20231205104325.vue
@@ -0,0 +1,2376 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104350.vue b/.history/src/views/TAN_20231205104350.vue
new file mode 100644
index 0000000..cd28e19
--- /dev/null
+++ b/.history/src/views/TAN_20231205104350.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104408.vue b/.history/src/views/TAN_20231205104408.vue
new file mode 100644
index 0000000..ac25a9f
--- /dev/null
+++ b/.history/src/views/TAN_20231205104408.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          // .t_con1{
+          //   margin-left: 20px;
+          // }
+          // .t_con2{
+          //   margin-right: 20px;
+          // }
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104452.vue b/.history/src/views/TAN_20231205104452.vue
new file mode 100644
index 0000000..f3ad01a
--- /dev/null
+++ b/.history/src/views/TAN_20231205104452.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104512.vue b/.history/src/views/TAN_20231205104512.vue
new file mode 100644
index 0000000..037b8c8
--- /dev/null
+++ b/.history/src/views/TAN_20231205104512.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104542.vue b/.history/src/views/TAN_20231205104542.vue
new file mode 100644
index 0000000..c0bf0e5
--- /dev/null
+++ b/.history/src/views/TAN_20231205104542.vue
@@ -0,0 +1,2375 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104621.vue b/.history/src/views/TAN_20231205104621.vue
new file mode 100644
index 0000000..1ef7294
--- /dev/null
+++ b/.history/src/views/TAN_20231205104621.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104647.vue b/.history/src/views/TAN_20231205104647.vue
new file mode 100644
index 0000000..0ab7d68
--- /dev/null
+++ b/.history/src/views/TAN_20231205104647.vue
@@ -0,0 +1,2381 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-left: 5px;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104658.vue b/.history/src/views/TAN_20231205104658.vue
new file mode 100644
index 0000000..1ef7294
--- /dev/null
+++ b/.history/src/views/TAN_20231205104658.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104711.vue b/.history/src/views/TAN_20231205104711.vue
new file mode 100644
index 0000000..5ae8baa
--- /dev/null
+++ b/.history/src/views/TAN_20231205104711.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 160px;
+            height: 160px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 160px;
+              height: 160px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104733.vue b/.history/src/views/TAN_20231205104733.vue
new file mode 100644
index 0000000..1ef7294
--- /dev/null
+++ b/.history/src/views/TAN_20231205104733.vue
@@ -0,0 +1,2380 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104737.vue b/.history/src/views/TAN_20231205104737.vue
new file mode 100644
index 0000000..96cfdef
--- /dev/null
+++ b/.history/src/views/TAN_20231205104737.vue
@@ -0,0 +1,2381 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 5px;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104745.vue b/.history/src/views/TAN_20231205104745.vue
new file mode 100644
index 0000000..9b32b8e
--- /dev/null
+++ b/.history/src/views/TAN_20231205104745.vue
@@ -0,0 +1,2381 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205104803.vue b/.history/src/views/TAN_20231205104803.vue
new file mode 100644
index 0000000..3480893
--- /dev/null
+++ b/.history/src/views/TAN_20231205104803.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "center",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105255.vue b/.history/src/views/TAN_20231205105255.vue
new file mode 100644
index 0000000..1d6c939
--- /dev/null
+++ b/.history/src/views/TAN_20231205105255.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "30%",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "50%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105312.vue b/.history/src/views/TAN_20231205105312.vue
new file mode 100644
index 0000000..7245af0
--- /dev/null
+++ b/.history/src/views/TAN_20231205105312.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "30%",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "30%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105337.vue b/.history/src/views/TAN_20231205105337.vue
new file mode 100644
index 0000000..5270482
--- /dev/null
+++ b/.history/src/views/TAN_20231205105337.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "34%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105404.vue b/.history/src/views/TAN_20231205105404.vue
new file mode 100644
index 0000000..3e5c9e3
--- /dev/null
+++ b/.history/src/views/TAN_20231205105404.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["40%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105416.vue b/.history/src/views/TAN_20231205105416.vue
new file mode 100644
index 0000000..c6a2e9b
--- /dev/null
+++ b/.history/src/views/TAN_20231205105416.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["36%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105450.vue b/.history/src/views/TAN_20231205105450.vue
new file mode 100644
index 0000000..e92430b
--- /dev/null
+++ b/.history/src/views/TAN_20231205105450.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["34%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105510.vue b/.history/src/views/TAN_20231205105510.vue
new file mode 100644
index 0000000..e92430b
--- /dev/null
+++ b/.history/src/views/TAN_20231205105510.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["34%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105527.vue b/.history/src/views/TAN_20231205105527.vue
new file mode 100644
index 0000000..082d100
--- /dev/null
+++ b/.history/src/views/TAN_20231205105527.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["30%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105528.vue b/.history/src/views/TAN_20231205105528.vue
new file mode 100644
index 0000000..082d100
--- /dev/null
+++ b/.history/src/views/TAN_20231205105528.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["30%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105542.vue b/.history/src/views/TAN_20231205105542.vue
new file mode 100644
index 0000000..709f104
--- /dev/null
+++ b/.history/src/views/TAN_20231205105542.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "30%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105558.vue b/.history/src/views/TAN_20231205105558.vue
new file mode 100644
index 0000000..f9e8323
--- /dev/null
+++ b/.history/src/views/TAN_20231205105558.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "28%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105609.vue b/.history/src/views/TAN_20231205105609.vue
new file mode 100644
index 0000000..52675a4
--- /dev/null
+++ b/.history/src/views/TAN_20231205105609.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "25%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105619.vue b/.history/src/views/TAN_20231205105619.vue
new file mode 100644
index 0000000..5eb683d
--- /dev/null
+++ b/.history/src/views/TAN_20231205105619.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "60%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105651.vue b/.history/src/views/TAN_20231205105651.vue
new file mode 100644
index 0000000..c544a35
--- /dev/null
+++ b/.history/src/views/TAN_20231205105651.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "56%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105706.vue b/.history/src/views/TAN_20231205105706.vue
new file mode 100644
index 0000000..bf218b5
--- /dev/null
+++ b/.history/src/views/TAN_20231205105706.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "70%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105711.vue b/.history/src/views/TAN_20231205105711.vue
new file mode 100644
index 0000000..f21c042
--- /dev/null
+++ b/.history/src/views/TAN_20231205105711.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "60%",
+          y: "20%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105724.vue b/.history/src/views/TAN_20231205105724.vue
new file mode 100644
index 0000000..f0b53a7
--- /dev/null
+++ b/.history/src/views/TAN_20231205105724.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "60%",
+          y: "24%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105736.vue b/.history/src/views/TAN_20231205105736.vue
new file mode 100644
index 0000000..dbdd23e
--- /dev/null
+++ b/.history/src/views/TAN_20231205105736.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "60%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105752.vue b/.history/src/views/TAN_20231205105752.vue
new file mode 100644
index 0000000..fcb7386
--- /dev/null
+++ b/.history/src/views/TAN_20231205105752.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放量统计</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105948.vue b/.history/src/views/TAN_20231205105948.vue
new file mode 100644
index 0000000..a75b419
--- /dev/null
+++ b/.history/src/views/TAN_20231205105948.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205105950.vue b/.history/src/views/TAN_20231205105950.vue
new file mode 100644
index 0000000..a75b419
--- /dev/null
+++ b/.history/src/views/TAN_20231205105950.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 164px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110044.vue b/.history/src/views/TAN_20231205110044.vue
new file mode 100644
index 0000000..fa29327
--- /dev/null
+++ b/.history/src/views/TAN_20231205110044.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 14px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110349.vue b/.history/src/views/TAN_20231205110349.vue
new file mode 100644
index 0000000..f0d0369
--- /dev/null
+++ b/.history/src/views/TAN_20231205110349.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110532.vue b/.history/src/views/TAN_20231205110532.vue
new file mode 100644
index 0000000..f0d0369
--- /dev/null
+++ b/.history/src/views/TAN_20231205110532.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110703.vue b/.history/src/views/TAN_20231205110703.vue
new file mode 100644
index 0000000..7c5e468
--- /dev/null
+++ b/.history/src/views/TAN_20231205110703.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110743.vue b/.history/src/views/TAN_20231205110743.vue
new file mode 100644
index 0000000..5ee9dd1
--- /dev/null
+++ b/.history/src/views/TAN_20231205110743.vue
@@ -0,0 +1,2383 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    margin-left: 50px;
+    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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110749.vue b/.history/src/views/TAN_20231205110749.vue
new file mode 100644
index 0000000..7c5e468
--- /dev/null
+++ b/.history/src/views/TAN_20231205110749.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110828.vue b/.history/src/views/TAN_20231205110828.vue
new file mode 100644
index 0000000..36ec1b2
--- /dev/null
+++ b/.history/src/views/TAN_20231205110828.vue
@@ -0,0 +1,2383 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    padding-left: 50px;
+    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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110837.vue b/.history/src/views/TAN_20231205110837.vue
new file mode 100644
index 0000000..7c5e468
--- /dev/null
+++ b/.history/src/views/TAN_20231205110837.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: 24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110847.vue b/.history/src/views/TAN_20231205110847.vue
new file mode 100644
index 0000000..8d72845
--- /dev/null
+++ b/.history/src/views/TAN_20231205110847.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: 54px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110853.vue b/.history/src/views/TAN_20231205110853.vue
new file mode 100644
index 0000000..55dd632
--- /dev/null
+++ b/.history/src/views/TAN_20231205110853.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: -24px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110936.vue b/.history/src/views/TAN_20231205110936.vue
new file mode 100644
index 0000000..4303e87
--- /dev/null
+++ b/.history/src/views/TAN_20231205110936.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: -36px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205110952.vue b/.history/src/views/TAN_20231205110952.vue
new file mode 100644
index 0000000..d119508
--- /dev/null
+++ b/.history/src/views/TAN_20231205110952.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: -45px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111007.vue b/.history/src/views/TAN_20231205111007.vue
new file mode 100644
index 0000000..e97e3d4
--- /dev/null
+++ b/.history/src/views/TAN_20231205111007.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111102.vue b/.history/src/views/TAN_20231205111102.vue
new file mode 100644
index 0000000..f8b3fda
--- /dev/null
+++ b/.history/src/views/TAN_20231205111102.vue
@@ -0,0 +1,2384 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    position: absolute;
+    left: 20px;
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111120.vue b/.history/src/views/TAN_20231205111120.vue
new file mode 100644
index 0000000..e97e3d4
--- /dev/null
+++ b/.history/src/views/TAN_20231205111120.vue
@@ -0,0 +1,2382 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111145.vue b/.history/src/views/TAN_20231205111145.vue
new file mode 100644
index 0000000..f6e360c
--- /dev/null
+++ b/.history/src/views/TAN_20231205111145.vue
@@ -0,0 +1,2383 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>碳排放监测管理统计分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16, 
+          itemHeight: 8, 
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 auto;
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,.t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1{
+            margin-left: 20px;
+          }
+          .t_con2{
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),.t_con2:nth-child(n+2){
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111252.vue b/.history/src/views/TAN_20231205111252.vue
new file mode 100644
index 0000000..a2f9944
--- /dev/null
+++ b/.history/src/views/TAN_20231205111252.vue
@@ -0,0 +1,2387 @@
+<template>
+  <div class="box">
+    <div>
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 auto;
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111418.vue b/.history/src/views/TAN_20231205111418.vue
new file mode 100644
index 0000000..0626139
--- /dev/null
+++ b/.history/src/views/TAN_20231205111418.vue
@@ -0,0 +1,2387 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 auto;
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111424.vue b/.history/src/views/TAN_20231205111424.vue
new file mode 100644
index 0000000..188f0bb
--- /dev/null
+++ b/.history/src/views/TAN_20231205111424.vue
@@ -0,0 +1,2387 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 auto;
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111452.vue b/.history/src/views/TAN_20231205111452.vue
new file mode 100644
index 0000000..d912818
--- /dev/null
+++ b/.history/src/views/TAN_20231205111452.vue
@@ -0,0 +1,2384 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111511.vue b/.history/src/views/TAN_20231205111511.vue
new file mode 100644
index 0000000..d4b4652
--- /dev/null
+++ b/.history/src/views/TAN_20231205111511.vue
@@ -0,0 +1,2389 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit{
+      background: url(../assets/tan/分组\ 7.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111520.vue b/.history/src/views/TAN_20231205111520.vue
new file mode 100644
index 0000000..2ee3401
--- /dev/null
+++ b/.history/src/views/TAN_20231205111520.vue
@@ -0,0 +1,2389 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111704.vue b/.history/src/views/TAN_20231205111704.vue
new file mode 100644
index 0000000..b6d915e
--- /dev/null
+++ b/.history/src/views/TAN_20231205111704.vue
@@ -0,0 +1,2391 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111731.vue b/.history/src/views/TAN_20231205111731.vue
new file mode 100644
index 0000000..14672c1
--- /dev/null
+++ b/.history/src/views/TAN_20231205111731.vue
@@ -0,0 +1,2394 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+    align-items: center;
+    justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111753.vue b/.history/src/views/TAN_20231205111753.vue
new file mode 100644
index 0000000..14672c1
--- /dev/null
+++ b/.history/src/views/TAN_20231205111753.vue
@@ -0,0 +1,2394 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+    align-items: center;
+    justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111800.vue b/.history/src/views/TAN_20231205111800.vue
new file mode 100644
index 0000000..b662184
--- /dev/null
+++ b/.history/src/views/TAN_20231205111800.vue
@@ -0,0 +1,2394 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    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: -50px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111821.vue b/.history/src/views/TAN_20231205111821.vue
new file mode 100644
index 0000000..8741f69
--- /dev/null
+++ b/.history/src/views/TAN_20231205111821.vue
@@ -0,0 +1,2395 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      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: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111902.vue b/.history/src/views/TAN_20231205111902.vue
new file mode 100644
index 0000000..75c3116
--- /dev/null
+++ b/.history/src/views/TAN_20231205111902.vue
@@ -0,0 +1,2395 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      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: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111909.vue b/.history/src/views/TAN_20231205111909.vue
new file mode 100644
index 0000000..afc0e3c
--- /dev/null
+++ b/.history/src/views/TAN_20231205111909.vue
@@ -0,0 +1,2396 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111920.vue b/.history/src/views/TAN_20231205111920.vue
new file mode 100644
index 0000000..da3cdab
--- /dev/null
+++ b/.history/src/views/TAN_20231205111920.vue
@@ -0,0 +1,2397 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111939.vue b/.history/src/views/TAN_20231205111939.vue
new file mode 100644
index 0000000..890572a
--- /dev/null
+++ b/.history/src/views/TAN_20231205111939.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 160px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111949.vue b/.history/src/views/TAN_20231205111949.vue
new file mode 100644
index 0000000..e1e6d72
--- /dev/null
+++ b/.history/src/views/TAN_20231205111949.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 240px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205111956.vue b/.history/src/views/TAN_20231205111956.vue
new file mode 100644
index 0000000..e6a62fd
--- /dev/null
+++ b/.history/src/views/TAN_20231205111956.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 400px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112003.vue b/.history/src/views/TAN_20231205112003.vue
new file mode 100644
index 0000000..e4a5275
--- /dev/null
+++ b/.history/src/views/TAN_20231205112003.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 500px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112026.vue b/.history/src/views/TAN_20231205112026.vue
new file mode 100644
index 0000000..f1f0106
--- /dev/null
+++ b/.history/src/views/TAN_20231205112026.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 490px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112053.vue b/.history/src/views/TAN_20231205112053.vue
new file mode 100644
index 0000000..d18170a
--- /dev/null
+++ b/.history/src/views/TAN_20231205112053.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 488px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112130.vue b/.history/src/views/TAN_20231205112130.vue
new file mode 100644
index 0000000..f1f0106
--- /dev/null
+++ b/.history/src/views/TAN_20231205112130.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 490px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112237.vue b/.history/src/views/TAN_20231205112237.vue
new file mode 100644
index 0000000..f1f0106
--- /dev/null
+++ b/.history/src/views/TAN_20231205112237.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 490px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112405.vue b/.history/src/views/TAN_20231205112405.vue
new file mode 100644
index 0000000..f1f0106
--- /dev/null
+++ b/.history/src/views/TAN_20231205112405.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 490px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/TAN_20231205112406.vue b/.history/src/views/TAN_20231205112406.vue
new file mode 100644
index 0000000..f1f0106
--- /dev/null
+++ b/.history/src/views/TAN_20231205112406.vue
@@ -0,0 +1,2398 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="jrtj">
+          <p class="title">接入统计</p>
+          <div class="insides">
+            <div class="con" v-for="item in tjlist">
+              <img src="../assets/tan/组 3128.png" alt="" />
+              <div class="r_con">
+                <p>{{ item.count }}</p>
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="centers">
+            <p>100</p>
+            <p>总接入数量</p>
+            <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+          </div>
+        </div>
+        <div class="ssfhzs">
+          <p class="title">实时负荷走势</p>
+          <ul class="typeBox">
+            <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+              总量
+            </li>
+            <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+              发电
+            </li>
+            <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+              石化
+            </li>
+            <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+              钢铁
+            </li>
+            <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+              有色
+            </li>
+          </ul>
+          <div id="ssfhzs"></div>
+        </div>
+        <div class="ynl">
+          <p class="title">碳排放趋势</p>
+          <div id="ynl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="tyjg">
+          <p class="title">碳源结构</p>
+          <div id="tyjg">
+            <div class="t_content">
+              <div class="left">
+                <div
+                  v-for="(item, index) in controls1"
+                  :key="index"
+                  class="t_con1"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div class="cen_img">
+                <img src="../assets/tan/组 3141.png" alt="" />
+              </div>
+              <div class="right">
+                <div
+                  v-for="(item, index) in controls2"
+                  :key="index"
+                  class="t_con2"
+                >
+                  <p class="t_name">{{ item.name }}</p>
+                  <p class="t_footer">
+                    <span class="t_count">{{ item.count }}</span>
+                    <span class="t_img1" v-if="item.isShow == true">
+                      {{ item.percent }}
+                      <img src="../assets/tan/325数值上升.png" alt="" />
+                    </span>
+                    <span class="t_img2" v-else>
+                      {{ item.percent }}%
+                      <img src="../assets/tan/325数值上升 (2).png" alt="" />
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="nyxhqk">
+          <p class="title">主要能源消耗情况</p>
+          <div id="nyxhqk"></div>
+        </div>
+        <div class="qyydlpm">
+          <p class="title">
+            企业碳排放量排名 <span class="danwei">单位（万吨）</span>
+          </p>
+          <ul class="list">
+            <li v-for="(item, index) in list" :style="listClass(index)">
+              <p>{{ index + 1 }}</p>
+              <p>{{ item.name }}</p>
+              <p>{{ item.value }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">碳排放监测数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              300<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>碳排放总量:</span>
+            <p style="color: #44bfd6">
+              450<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="qyhyfb">
+          <p class="title">企业行业分布</p>
+          <div id="qyhyfb"></div>
+        </div>
+        <div class="hytpfzl">
+          <p class="title">行业碳排放总量</p>
+          <div id="hytpfzl">
+            <div id="dl"></div>
+            <div id="gt"></div>
+            <div id="sn"></div>
+            <div id="zj"></div>
+            <div id="sh"></div>
+            <div id="hg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+// const fontSizeRem = (size) => {
+//   const clientWidth =
+//     window.innerWidth ||
+//     document.documentElement.clientWidth ||
+//     document.body.clientWidth;
+//   if (!clientWidth) return;
+//   console.log(clientWidth);
+//   let fontSize = clientWidth / 1920; //尺寸大小
+//   return size * fontSize;
+// };
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "总量",
+      tjlist: [
+        {
+          name: "工业生产",
+          count: "10",
+        },
+        {
+          name: "商业楼宇",
+          count: "22",
+        },
+        {
+          name: "公共建设",
+          count: "18",
+        },
+        {
+          name: "其他",
+          count: "50",
+        },
+      ],
+      controls2: [
+        {
+          name: "汽油（万升）",
+          count: "2566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "柴油（万升）",
+          count: "6566",
+          isShow: true,
+          percent: "10",
+        },
+        {
+          name: "煤（吨）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      controls1: [
+        {
+          name: "电（万度）",
+          count: "4566",
+          isShow: true,
+          percent: "10",
+        },
+
+        {
+          name: "水（万吨）",
+          count: "5566",
+          isShow: false,
+          percent: "10",
+        },
+
+        {
+          name: "燃气（立方）",
+          count: "7566",
+          isShow: true,
+          percent: "10",
+        },
+      ],
+      list: [
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+        {
+          name: "济南综合新能源服务有线公司",
+          value: "236",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        // legend: {
+        //     left: "right",
+        //     data: [
+        //         { icon: "roundRect", name: "昨日" },
+        //         { icon: "roundRect", name: "今日" },
+        //     ],
+        //     textStyle: {
+        //         fontSize: 14,
+        //         fontFamily: "AlibabaPuHuiTi",
+        //         fontWeight: 400,
+        //         color: "rgba(255,255,255,0.8)",
+        //     },
+        // },
+
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "万吨标煤",
+            nameTextStyle: {
+              color: "#fff",
+              // .072917rem /* 14/192 */
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              padding: 10,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.072rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            // .010417rem /* 2/192 */
+            lineStyle: {
+              width: 2,
+              color: "#29F1FA",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#29F1FA",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+        ],
+      },
+      option1: {
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "cross",
+        //     label: {
+        //       backgroundColor: "#6a7985",
+        //     },
+        //   },
+        // },
+        legend: {
+          left: "right",
+          top: 40,
+          data: [
+            { icon: "", name: "2022" },
+            { icon: "", name: "2023" },
+          ],
+          textStyle: {
+            // fontSize: fontSizeRem(14),
+            fontSize: "0.072rem",
+            fontFamily: "AlibabaPuHuiTi",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "3%",
+          top: "30%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                // .0625rem /* 12/192 */
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位:万吨",
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: fontSizeRem(14),
+              fontSize: "0.072rem",
+              // .052083rem /* 10/192 */
+              padding: 10,
+              // padding: "0.052083rem",
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                // fontSize: fontSizeRem(14),
+                fontSize: "0.0729rem",
+                fontFamily: "AlibabaPuHuiTi",
+                fontWeight: 400,
+                color: "rgba(255,255,255,0.8)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2022",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            lineStyle: {
+              // width: fontSizeRem(2),
+              width: 2,
+              color: "#FDCC00",
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: "#FDCC00",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 99)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(7, 67, 103)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300,
+            ],
+          },
+          {
+            name: "2023",
+            type: "line",
+            // stack: "Total",
+            smooth: true,
+            lineStyle: {
+              width: 2,
+              // width: "0.01rem",
+              color: "#1B7EF2",
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: "#1B7EF2",
+            },
+            areaStyle: {
+              opacity: 0.4,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgb(7, 51, 96)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(9, 58, 117)",
+                },
+              ]),
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [
+              220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175,
+              120, 150, 180,
+            ],
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#27E9BF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#27E9BF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#27E9BF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#28E6FD",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "钢铁",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#28E6FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#28E6FD",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles3: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // .083333rem /* 16/192 */
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#D5BB57",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "水泥",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // .0625rem /* 12/192 */
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#D5BB57",
+                  },
+                  {
+                    offset: 1,
+                    color: "#D5BB57",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles4: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#DF7253",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "治金",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#DF7253",
+                  },
+                  {
+                    offset: 1,
+                    color: "#DF7253",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles5: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#E98A44",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "石化",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#E98A44",
+                  },
+                  {
+                    offset: 1,
+                    color: "#E98A44",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles6: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  // fontSize: fontSizeRem(16),
+                  fontSize: "0.0833rem",
+                  color: "#6D59F6",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "化工",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              // fontSize: fontSizeRem(12),
+              fontSize: "0.0625rem",
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#6D59F6",
+                  },
+                  {
+                    offset: 1,
+                    color: "#6D59F6",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    listClass(index) {
+      if (index == 0) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+      } else if (index == 1) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+      } else if (index == 2) {
+        return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+      }
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //用户行业占比
+    initYhhyzb() {
+      let color = [
+        "#2B4C86",
+        "#86ACCE ",
+        "#9CA5B4",
+        "#23BAA6",
+        "#459EA2",
+        "#2B7DE4",
+        "#7C7062",
+        "#6B7BC0",
+        "#294A83",
+      ];
+      let echartData = [
+        {
+          name: "发电行业",
+          value: "20",
+        },
+        {
+          name: "石化行业",
+          value: "20",
+        },
+        {
+          name: "化工行业",
+          value: "30",
+        },
+        {
+          name: "建材行业",
+          value: "20",
+        },
+        {
+          name: "钢铁行业",
+          value: "20",
+        },
+        {
+          name: "有色行业",
+          value: "20",
+        },
+        {
+          name: "造纸行业",
+          value: "20",
+        },
+        {
+          name: "航空行业",
+          value: "20",
+        },
+        {
+          name: "其他行业",
+          value: "20",
+        },
+      ];
+      let formatNumber = function (num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = echartData.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+
+      let option = {
+        color: color,
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        title: [
+          {
+            text:
+              "{val|" +
+              echartData[0].value +
+              "%" +
+              "}\n{name|" +
+              echartData[0].name +
+              "}",
+            top: "54%",
+            left: "26%",
+            textStyle: {
+              rich: {
+                name: {
+                  // fontSize: fontSizeRem(12),
+                  fontSize: "0.0625rem",
+                  fontWeight: "normal",
+                  color: "#fff",
+                  align: "center",
+                  padding: [10, 0],
+                },
+                val: {
+                  // fontSize: fontSizeRem(24),
+                  fontSize: "0.125rem",
+                  fontWeight: "bold",
+                  align: "center",
+                  color: "#fff",
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          orient: "vertical",
+          icon: "circle",
+          x: "58%",
+          y: "23%",
+          itemWidth: 12,
+          itemHeight: 12,
+          align: "left",
+          textStyle: {
+            color: "#",
+            rich: {
+              name: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+              value: {
+                // fontSize: fontSizeRem(16),
+                fontSize: "0.0833rem",
+                padding: [0, 5, 0, 15],
+              },
+              unit: {
+                // fontSize: fontSizeRem(12),
+                fontSize: "0.0625rem",
+              },
+            },
+          },
+          formatter: function (name) {
+            let res = echartData.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return (
+              "{name|" +
+              name +
+              "}  {value|" +
+              res.value +
+              "%" +
+              "}{unit|" +
+              unit +
+              "}"
+            );
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
+            animation: false, // 禁止动画效果
+            radius: ["45%", "60%"],
+            center: ["32%", "60%"],
+            data: echartData,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+          },
+        ],
+      };
+      this.defineEcharts("qyhyfb", option);
+    },
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    // .0625rem /* 12/192 */
+                    // fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    // fontSize: 16, //文字大小
+                    fontSize: "0.0833rem", //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      // fontSize: 14,
+                      fontSize: "0.0729rem",
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      // fontSize: 12,
+                      fontSize: "0.0625rem",
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+    nyxhqk() {
+      var attaData1 = [62, 52, 34, 61, 75, 140];
+      var attaData2 = [162, 152, 134, 161, 115, 150];
+      let option = {
+        // backgroundColor: "#000",
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          top: 60,
+          left: 60,
+          bottom: 20,
+          right: 40,
+        },
+        legend: {
+          left: "center",
+          top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
+          data: [
+            {
+              name: "2020",
+              icon: "rect",
+            },
+            {
+              name: "2021",
+              icon: "rect",
+            },
+          ],
+          textStyle: {
+            // fontSize: 14,
+            fontSize: "0.0729rem",
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        xAxis: {
+          show: false,
+          type: "value",
+          name: "",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+              type: "dashed",
+            },
+          },
+        },
+        yAxis: {
+          data: ["无烟煤", "褐煤", "洗精煤", "原油", "天然气", "焦炉煤气"],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "rgba(255, 255, 255, 0.5)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "2020",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              borderRadius: 4,
+              color: "#12FFFA",
+            },
+            data: attaData1,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+          {
+            name: "2021",
+            type: "bar",
+            barWidth: 8,
+            zlevel: 2,
+            itemStyle: {
+              color: "#FF8B4D",
+              borderRadius: 4,
+            },
+            data: attaData2,
+            showBackground: true, //柱状背景
+            backgroundStyle: {
+              //背景颜色，加透明度
+              color: "#0E296D",
+            },
+          },
+        ],
+      };
+      this.defineEcharts("nyxhqk", option);
+    },
+  },
+  mounted() {
+    this.initYhhyzb();
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    // this.dl();
+    this.defineEcharts("dl", this.circles1);
+    this.defineEcharts("gt", this.circles2);
+    this.defineEcharts("sn", this.circles3);
+    this.defineEcharts("zj", this.circles4);
+    this.defineEcharts("sh", this.circles5);
+    this.defineEcharts("hg", this.circles6);
+    this.nyxhqk();
+    this.initMap();
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+
+    // margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      text-align: center;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: 490px;
+      // margin-left: -50px;
+    }
+    }
+
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .jrtj {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .centers {
+          width: 217px;
+          height: 126px;
+          position: absolute;
+          // left: 70px;
+          // top: 50px;
+          left: 0.45rem;
+          top: 0.45rem;
+          // text-align: center;
+          display: block;
+
+          p:nth-child(1) {
+            width: 81px;
+            height: 25px;
+            font-size: 24;
+            text-align: center;
+            font-weight: 500;
+            color: #29f1fa;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            // top: 50px;
+            top: 0.13rem;
+          }
+
+          p:nth-child(2) {
+            // width: 71px;
+            height: 25px;
+            text-align: center;
+            font-size: 12;
+            font-weight: 250;
+            color: #ffffff;
+            line-height: 22px;
+            position: absolute;
+            left: 72px;
+            top: 0.25rem;
+            // top: 80px;
+          }
+
+          img {
+            width: 217px;
+            height: 126px;
+          }
+        }
+
+        .insides {
+          margin-top: 56px;
+          width: 436px;
+          height: 294px;
+          display: flex;
+          justify-content: space-around;
+          flex-wrap: wrap;
+          position: relative;
+
+          .con {
+            width: 156px;
+            display: flex;
+
+            img {
+              width: 60px;
+              height: 72px;
+              display: block;
+            }
+
+            p:nth-child(1) {
+              color: #fff;
+            }
+
+            p:nth-child(2) {
+              width: 56px;
+              height: 22px;
+              font-size: 14;
+              // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+              font-weight: 300;
+              color: #7dd9dd;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+
+      .ssfhzs {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          right: 20px;
+          // left: 50%;
+          // transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ssfhzs {
+          position: absolute;
+          width: 100%;
+          height: 210px;
+          bottom: 10px;
+        }
+      }
+
+      .ynl {
+        height: 325px;
+        background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+        background-size: cover;
+        margin-top: 6px;
+
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 190px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          // font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          li {
+            width: 39px;
+            height: 21px;
+            background: rgba(29, 29, 29, 0.5);
+            border-radius: 2px 2px 2px 2px;
+            font-size: 14px;
+            border: 1px solid #666666;
+            text-align: center;
+            margin: 2.5px;
+            cursor: pointer;
+          }
+
+          .active {
+            background: rgba(10, 167, 255, 0.3);
+            border: 1px solid #0aa7ff;
+          }
+        }
+
+        #ynl {
+          position: absolute;
+          width: 100%;
+          height: 300px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .tyjg {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/tan/组\ 3142.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #tyjg {
+          width: 100%;
+          height: 100%;
+
+          .t_content {
+            width: 100%;
+            height: 300px;
+            display: flex;
+            justify-content: space-around;
+            // flex-wrap: wrap;
+            // align-content: space-between;
+          }
+
+          .cen_img {
+            width: 164px;
+            height: 164px;
+            border: none;
+            display: block;
+            margin: 0 auto;
+            padding-left: 10px;
+            margin-top: 90px;
+            box-sizing: border-box;
+
+            img {
+              width: 164px;
+              height: 164px;
+              border: none;
+              display: block;
+              margin: 0 auto;
+            }
+          }
+
+          .t_con1,
+          .t_con2 {
+            width: 106px;
+            height: 60px;
+            margin-left: 20px;
+            margin-top: 60px;
+            border-radius: 4px 4px 4px 4px;
+            opacity: 1;
+            padding: 2px;
+            border: 1px solid #6bfffe;
+            text-align: center;
+            box-sizing: border-box;
+
+            .t_name {
+              width: 90px;
+              height: 30px;
+              font-size: 12px;
+              // font-family: Source Han Sans, Source Han Sans;
+              font-weight: 350;
+              color: #ffffff;
+              line-height: 30px;
+              display: block;
+            }
+
+            .t.footer {
+              display: flex;
+
+              .t_count {
+                width: 42px;
+                height: 36px;
+                font-size: 18px;
+                // font-family: Source Han Sans, Source Han Sans;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img1 {
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                color: #0cd9b5;
+                line-height: 36px;
+                display: block;
+              }
+
+              .t_img2 {
+                padding: 0;
+                width: 25px;
+                height: 36px;
+                font-size: 12px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: 350;
+                line-height: 36px;
+                color: #f71f1f;
+                display: block;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .nyxhqk {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #nyxhqk {
+          width: 100%;
+          height: 100%;
+        }
+
+        .pic {
+          width: 300px;
+          position: absolute;
+          height: 150px;
+          top: 100px;
+          left: 40px;
+        }
+      }
+
+      .qyydlpm {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 136px;
+          width: 246px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          display: flex;
+          // justify-content: flex-start;
+
+          .danwei {
+            // position: absolute;
+            // right: 50px;
+            width: 75px;
+            height: 14px;
+            font-size: 12px;
+            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 14px;
+            display: block;
+          }
+        }
+
+        .list {
+          list-style: none;
+          height: 300px;
+          width: 100%;
+          float: left;
+          margin-top: 50px;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 30px 0 30px;
+            box-sizing: border-box;
+            margin: 9px;
+
+            p:nth-of-type(1) {
+              background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+              width: 24px;
+              height: 16px;
+              line-height: 16px;
+              background: rgba(34, 23, 23, 0.1);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+              text-align: center;
+              border: 1px solid #b1b1b1;
+              background-size: cover;
+            }
+
+            p:nth-of-type(2) {
+              width: 190px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+
+            p:nth-of-type(3) {
+              width: 27px;
+              height: 12px;
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 500;
+              color: rgba(255, 255, 255, 0.8);
+              line-height: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 994px;
+      height: 325px;
+      // background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      // background-size: cover;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: space-between;
+
+      .qyhyfb {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #qyhyfb {
+          width: 100%;
+          height: 300px;
+        }
+      }
+
+      .hytpfzl {
+        width: 492px;
+        height: 100%;
+        background: url(../assets/tan/组\ 3126.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #hytpfzl {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          align-content: center;
+          // align-items: center;
+
+          #dl,
+          #gt,
+          #sn,
+          #zj,
+          #sh,
+          #hg {
+            width: 132px;
+            height: 132px;
+            // background-color: red;
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
+      }
+
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/assets/tan/组 3141.png b/src/assets/tan/组 3141.png
index 583107a..d94d416 100644
Binary files a/src/assets/tan/组 3141.png and b/src/assets/tan/组 3141.png differ
diff --git a/src/assets/zhsdy/图层 2.png b/src/assets/zhsdy/图层 2.png
index 05121f1..e4660e6 100644
Binary files a/src/assets/zhsdy/图层 2.png and b/src/assets/zhsdy/图层 2.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 501e8d5..97cc70d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,11 @@ const routes = [
     name: "xqxy",
     component: () => import("../views/XQXY.vue"),
   },
+  {
+    path:"/one",
+    name:"one",
+    component:()=>import("../views/ONE.vue"),
+  }
 ];
 
 const router = new VueRouter({
diff --git a/src/views/ONE.vue b/src/views/ONE.vue
new file mode 100644
index 0000000..5b7125d
--- /dev/null
+++ b/src/views/ONE.vue
@@ -0,0 +1,339 @@
+<template>
+  <div>
+    <div id="bing"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProjectONE",
+
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.getbing();
+  },
+
+  methods: {
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("bing", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#bing {
+  width: 500px;
+  height: 500px;
+}
+</style>
diff --git a/src/views/TAN.vue b/src/views/TAN.vue
index a75da75..6a2c812 100644
--- a/src/views/TAN.vue
+++ b/src/views/TAN.vue
@@ -2,7 +2,9 @@
   <div class="box">
     <div class="title">
       <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
-      <p>碳排放量统计</p>
+      <div class="title_tit">
+        <p>碳排放监测管理统计分析</p>
+      </div>
       <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
     </div>
     <div class="containter">
@@ -59,7 +61,7 @@
                 <div
                   v-for="(item, index) in controls1"
                   :key="index"
-                  class="t_con"
+                  class="t_con1"
                 >
                   <p class="t_name">{{ item.name }}</p>
                   <p class="t_footer">
@@ -82,7 +84,7 @@
                 <div
                   v-for="(item, index) in controls2"
                   :key="index"
-                  class="t_con"
+                  class="t_con2"
                 >
                   <p class="t_name">{{ item.name }}</p>
                   <p class="t_footer">
@@ -344,7 +346,7 @@ export default {
         yAxis: [
           {
             type: "value",
-            name: "单位:万吨标煤",
+            name: "万吨标煤",
             nameTextStyle: {
               color: "#fff",
               // .072917rem /* 14/192 */
@@ -589,7 +591,7 @@ export default {
                   // .083333rem /* 16/192 */
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#27E9BF",
                   fontWeight: "bold",
                 },
               },
@@ -645,11 +647,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#27E9BF",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#27E9BF",
                   },
                 ]),
               },
@@ -680,7 +682,7 @@ export default {
                 a: {
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#28E6FD",
                   fontWeight: "bold",
                 },
               },
@@ -736,11 +738,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#28E6FD",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#28E6FD",
                   },
                 ]),
               },
@@ -772,7 +774,7 @@ export default {
                   // .083333rem /* 16/192 */
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#D5BB57",
                   fontWeight: "bold",
                 },
               },
@@ -829,11 +831,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#D5BB57",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#D5BB57",
                   },
                 ]),
               },
@@ -864,7 +866,7 @@ export default {
                 a: {
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#DF7253",
                   fontWeight: "bold",
                 },
               },
@@ -920,11 +922,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#DF7253",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#DF7253",
                   },
                 ]),
               },
@@ -955,7 +957,7 @@ export default {
                 a: {
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#E98A44",
                   fontWeight: "bold",
                 },
               },
@@ -1011,11 +1013,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#E98A44",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#E98A44",
                   },
                 ]),
               },
@@ -1046,7 +1048,7 @@ export default {
                 a: {
                   // fontSize: fontSizeRem(16),
                   fontSize: "0.0833rem",
-                  color: "#FFFFFF",
+                  color: "#6D59F6",
                   fontWeight: "bold",
                 },
               },
@@ -1102,11 +1104,11 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                   {
                     offset: 0,
-                    color: "#005DCF",
+                    color: "#6D59F6",
                   },
                   {
                     offset: 1,
-                    color: "#00CCFF",
+                    color: "#6D59F6",
                   },
                 ]),
               },
@@ -1209,8 +1211,8 @@ export default {
               "}\n{name|" +
               echartData[0].name +
               "}",
-            top: "center",
-            left: "34%",
+            top: "54%",
+            left: "26%",
             textStyle: {
               rich: {
                 name: {
@@ -1235,8 +1237,8 @@ export default {
         legend: {
           orient: "vertical",
           icon: "circle",
-          x: "70%",
-          y: "20%",
+          x: "58%",
+          y: "23%",
           itemWidth: 12,
           itemHeight: 12,
           align: "left",
@@ -1280,7 +1282,7 @@ export default {
             // roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
             animation: false, // 禁止动画效果
             radius: ["45%", "60%"],
-            center: ["40%", "50%"],
+            center: ["32%", "60%"],
             data: echartData,
 
             itemStyle: {
@@ -1607,6 +1609,8 @@ export default {
         legend: {
           left: "center",
           top: 40,
+          itemWidth: 16,
+          itemHeight: 8,
           data: [
             {
               name: "2020",
@@ -1739,26 +1743,38 @@ export default {
   .title {
     width: 100%;
     height: 76px;
-    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
+
+    // margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
-
-    p {
+    .title_tit {
+      width: 1600px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: url(../assets/tan/分组\ 7.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      text-align: center;
+      p {
       width: 527px;
       height: 47px;
       font-size: 44px;
       font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
       font-weight: 600;
+      text-align: center;
       line-height: 47px;
       letter-spacing: 3px;
       color: #fff;
-      margin-left: 164px;
+      margin-left: 490px;
+      // margin-left: -50px;
     }
+    }
+
 
     img:nth-of-type(1) {
       width: 231px;
@@ -1862,8 +1878,8 @@ export default {
             display: flex;
 
             img {
-              width: 50px;
-              height: 60px;
+              width: 60px;
+              height: 72px;
               display: block;
             }
 
@@ -2030,23 +2046,26 @@ export default {
           }
 
           .cen_img {
-            width: 159px;
-            height: 159px;
+            width: 164px;
+            height: 164px;
             border: none;
             display: block;
             margin: 0 auto;
+            padding-left: 10px;
             margin-top: 90px;
+            box-sizing: border-box;
 
             img {
-              width: 159px;
-              height: 159px;
+              width: 164px;
+              height: 164px;
               border: none;
               display: block;
               margin: 0 auto;
             }
           }
 
-          .t_con {
+          .t_con1,
+          .t_con2 {
             width: 106px;
             height: 60px;
             margin-left: 20px;
@@ -2112,8 +2131,14 @@ export default {
               }
             }
           }
-
-          .t_con:nth-child(n + 2) {
+          .t_con1 {
+            margin-left: 20px;
+          }
+          .t_con2 {
+            margin-right: 20px;
+          }
+          .t_con1:nth-child(n + 2),
+          .t_con2:nth-child(n + 2) {
             margin-top: 20px;
           }
         }